/** lib **/
import { reactive, onMounted, computed } from 'vue'
/** util **/
import { getBase64Image } from '../../../../assets/ts/util'

export default () => {
  // icons
  const icons = reactive([
    {
      id: '1',
      url: 'https://23kri02j3rke414ynf4dgx2i-wpengine.netdna-ssl.com/wp-content/uploads/2017/02/MOBAPI-Step-Collect.png',
      title: 'collection',
      loading: true,
    },
    {
      id: '2',
      url: 'https://23kri02j3rke414ynf4dgx2i-wpengine.netdna-ssl.com/wp-content/uploads/2017/02/MOBAPI-Step-Transform.png',
      title: 'processing',
      loading: true,
    },
    {
      id: '3',
      url: 'https://23kri02j3rke414ynf4dgx2i-wpengine.netdna-ssl.com/wp-content/uploads/2017/09/MOBAPI-Step-visualize.png',
      title: 'publication',
      loading: true,
    },
  ])
  // allLoading
  const allLoading = computed(() => {
    for (let item of icons) {
      if (item.loading) {
        return true
      }
    }
    return false
  })
  // onMounted Hook
  onMounted(() => {
    for (let item of icons) {
      let bgimg = new Image()
      bgimg.src = item.url
      bgimg.setAttribute('crossOrigin', 'Anonymous')
      let i = setInterval(() => {
        if (bgimg.complete) {
          clearInterval(i)
          item.url = getBase64Image(bgimg)
          item.loading = false
        }
      }, 1000)
    }
  })
  // @returns
  return {
    icons,
    allLoading,
  }
}
